<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="js/jquery-ui.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
	var page=$('#page').val();
	$("#accordion").accordion();
	if(page==1){
		banji();
	}else if(page==2){
		kecheng();
	}else if(page==3){
		teacher();
	}else if(page==4){
		var bjId=$('#stubjId').val();;
		$('#work').empty();
		$('#work').load('student',{bjId:bjId});
	}
})

function banji() {
	$('#work').empty();
	$('#work').load('banji',{method:'list'});
}

function kecheng(){
	$('#work').empty();
	$('#work').load('course',{method:'ajaxList'});
}

function teacher(){
	$('#work').empty();
	$('#work').load('teacher');
}

function student(){
	$('#work').empty();
	$('#work').load('student');
}

function classGrade(){
	$('#work').empty();
	$('#work').load('grade',{method:'classGrade'});
}

function peasonGrade(){
	$('#work').empty();
	$('#work').load('grade',{method:'peasonGrade'});
}

function allstugrade(){
	$('#work').empty();
	$('#work').load('grade',{method:'allstugrade'});
}
</script>

<style type="text/css">
		body {
			margin: 0;
			padding: 0;
		}
		.container {
			min-height: 100vh;
			display: flex;
			flex-direction: column;
		}
		.top {
			height: 80px;
			flex-grow: 0;
			display: flex;
		}
		.center {
			
			flex-grow: 1;
			display: flex;
			flex-direction: row;
		}
		
		.bottom {
			background-color:#CCE8EB;
			height: 40px;
			flex-grow: 0;
			text-align: center;
		}
		
		.bottom p{
			margin-top:10px;
			display: inline-block;
			font-size: 12px;
		}
		
		.leftbottom{
			height: 520px;
			width: 200px;
			
		}
		
		.img{
			height: 100%;
			width: 100%;
		
		}
		.leftMenu {
			padding-left:10px;
			width: 200px;
			text-align:center;
			flex-flow: 0;
		}
		.workspace {
			background-color:#f7fbfb;
			flex-grow:1;
			
		}
		
		.top1{
			height: 100%;
			width:300px;
			flex-grow:0;
		}
		
		.top2{
			height: 100%;
			flex-grow:1;
			font-size: 23px;
		}
		
		.top3{
			height: 100%;
			width:150px;
			flex-grow:0;
		}
	
		.top3 a{
			display: inline-block;
			margin-top:30px;
			text-decoration:none ; 
			text-decoration:none ;
			text-decoration:underline ;
			text-decoration:none ;
			color: black;
		}
	p a {
		text-decoration:none ; 
		text-decoration:none ;
		text-decoration:underline ;
		text-decoration:none ;
		color: #666;
		font-weight: 700;
		font-size:18px;
		margin-right: 15px;
	}
	


	
</style>
	
<title>首页</title>
</head>
<body>
	<div class="container">
		<input type="hidden" id="page" value="${page}">
		<input type="hidden" id="stubjId" value="${bjId}">
		<div class="top">
			<div class="top1">
				<img class="img" src="img/logo1.png" >
			</div>
			<div class="top2">
				<p>欢迎你：${user.name},登录本网站!</p>
			</div>
			<div class="top3">
			<a href="pwd?method=ls">修改密码</a>
			<a href="pwd?method=zx" >注销</a>
			</div>
		</div>
		<div class="center">
			<div class="leftMenu">
				<div id="accordion" class="sfq">
					<h3>班级管理</h3>
					<div>
						<p><a href="javaScript:banji()">班级管理</a></p>
						<p><a href="javaScript:kecheng()"> 课程管理</a></p>
						<p><a href="javaScript:teacher()"> 老师管理</a></p>
						<p><a href="javaScript:student()"> 学生管理</a></p></div>
					<h3>成绩管理</h3>
					<div>
						<p><a href="javaScript:classGrade()">班级成绩管理</a></p>
						<p><a href="javaScript:peasonGrade()">个人成绩管理</a></p>
						<p><a href="javaScript:allstugrade()">班级成绩查询</a></p>
						</div>
				</div>
				<div class="leftbottom">
				<img class="img" src="img/beijin7.jpg" >
				</div>
			</div>
			<div class="workspace" id="work"><h3 style="margin-left: 30px;">请点击左侧选项进行操作！</h3></div>
		</div>
		<div class="bottom"><p>软件技术3班-孙泽鑫韬</p></div>
	</div>
</body>
</html>